<template>
  <div>
    <!--    1.在HomeView页面中，引用/使用了HelloWorld组件
            2.因此这里就会显示HelloWorld组件的内容
            3.HelloWorld组件来源于 @/components/HelloWorld.vue
            4.@ 表示的就是/src
    -->
    <div style="margin: 10px 5px">
      <el-button type="primary" @click="add">新增</el-button>
      <el-button>其他</el-button>
    </div>
    <div style="margin: 10px 5px">
      <el-input v-model="search" style="width: 30%" placeholder="请输入要搜索的内容"/>
      <el-button style="margin-left: 10px" type="primary" @click="list">检索</el-button>
    </div>
    <el-table :data="tableData" stripe style="width: 150%">
      <el-table-column prop="id" label="ID" sortable>
      </el-table-column>
      <el-table-column prop="name" label="家具名">
      </el-table-column>
      <el-table-column prop="maker" label="厂家">
      </el-table-column>
      <el-table-column prop="price" label="价格">
      </el-table-column>
      <el-table-column prop="sales" label="销量">
      </el-table-column>
      <el-table-column prop="stock" label="库存">
      </el-table-column>
      <el-table-column fixed="right" label="操作" min-width="120">
        <!--        1.这里可以通过handleEdit(scope.row)-->
        <!--        可以将当前行的数据返回给handleEdit()-->
        <template #default="scope">
          <el-button type="primary" @click="handleEdit(scope.row)">编辑</el-button>
          <el-popconfirm title="确认删除吗?" @confirm="handleDel(scope.row.id)">
            <template #reference>
              <el-button type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!--
    1.<el-dialog v-model="dialogVisible" 表示对话框
    和dialogVisible变量进行双向绑定，控制是否显示对话框
    2.<el-form :model="form" 表示表单,
    数据和form数据变量双向绑定
    3.<el-input v-model="form.name" 表示表单的input控件，
    名字为name 需要和后台的JavaBean属性一致
    -->
    <el-dialog v-model="dialogVisible" title="提示" width="30%">
      <el-form :model="form" :rules="rules" ref="form" label-width="120px">
        <el-form-item label="家具名" prop="name">
          <el-input v-model="form.name" style="width: 50%"></el-input>
          {{ serverValidErrors.name }}
        </el-form-item>
        <el-form-item label="厂商" prop="maker">
          <el-input v-model="form.maker" style="width: 50%"></el-input>
          {{ serverValidErrors.maker }}
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input v-model="form.price" style="width: 50%"></el-input>
          {{ serverValidErrors.price }}
        </el-form-item>
        <el-form-item label="销量" prop="sales">
          <el-input v-model="form.sales" style="width: 50%"></el-input>
          {{ serverValidErrors.sales }}
        </el-form-item>
        <el-form-item label="库存" prop="stock">
          <el-input v-model="form.stock" style="width: 50%"></el-input>
          {{ serverValidErrors.stock }}
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible=false">取消</el-button>
          <el-button type="primary" @click="save">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <!--    分页显示-->
    <div style="margin: 10px 0">
      <el-pagination
          @size-change="handlePageSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[2,5,10,15]"
          :page-size="pageSize"
          background layout="total,sizes, prev, pager, next,jumper"
          :total="total"/>
    </div>

  </div>

</template>

<script>
// @ is an alias to /src
//导入组件，导入后，就可以使用
// 导入request 对象
import request from "@/utils/request";
//导出组件
export default {
  name: 'HomeView',
  components: {},
  data() {
    return {
      //存放后端存放的数据信息
      serverValidErrors: {},
      //增加分页相应的数据绑定
      currentPage: 1,//指定当前页
      pageSize: 5,//每页需要显示的记录数
      total: 10,//共有多少记录
      form: {},//定义一个空表单
      dialogVisible: false,//表示隐藏的，不可见得
      search: "",//检索条件，可以在进行分页时，保存上次的检索条件
      tableData: [],
      //定义添加表单的校验规则
      rules: {
        name: [
          //这里可以写入针对name的校验规则
          {required: true, message: '请输入家具名', trigger: 'blur'}],
        maker: [{required: true, message: '请输入厂家名', trigger: 'blur'}],
        price: [{required: true, message: '请输入价格', trigger: 'blur'},
          {pattern: /^([1-9]\d*|0)(\.\d+)?$/, message: '请输入数字', trigger: 'blur'}],
        sales: [{required: true, message: '请输入销量', trigger: 'blur'},
          {pattern: /^([1-9]\d*|0)$/, message: '请输入数字', trigger: 'blur'}],
        stock: [{required: true, message: '请输入库存', trigger: 'blur'},
          {pattern: /^([1-9]\d*|0)$/, message: '请输入数字', trigger: 'blur'}]
      }
    }
  },
  created() {
    this.list()//调用list方法
  },
  methods: {
    add() {
      //显示对话框
      this.dialogVisible = true
      //清空表单
      this.form = {}
      // 清空上次前端表单的校验信息
      this.$nextTick(() => {
        // console.log(this.$refs['form']);
        this.$refs['form'].resetFields();
      });
      // 清空上次后端表单的校验信息
      this.serverValidErrors = {}
      // this.$refs['form'].resetFields()
    },
    save() {//将填写的表单数据发送给后端
      //因为修改和添加走的是同一个表单，所以这里需要根据from.id进行判断
      // console.log("form.id--",this.form.id)
      if (this.form.id) {//有值就为真，就代表是修改
        //request本质是ajax请求----会进行异步处理
        request.put("/api/update", this.form).then(res => {
          if (res.code == 200) {//表示修改成功
            //显示一个成功的消息框
            this.$message({
              type: "success",
              message: "更新成功"
            })
          } else {
            //显示一个失败的消息框
            this.$message({
              type: "error",
              message: "更新失败"
            })
          }
          this.dialogVisible = false
          this.list();
        })
      } else {//如果没有值就代表添加
        //添加表单校验
        this.$refs['form'].validate(valid => {
          //valid就是表单校验后的结果
          //关闭前端校验，测试后端校验
          //valid = true
          if (valid) {//如果校验通过
            /**
             *  request.post 表示是以post方式进行提交
             *  url :https://localhost:8080/ssm/save
             *  this.form : 表示需要携带的数据
             *  then(res => {}) 表示将返回的数据放入到res中，进行调用
             *   console.log("res-",res) ：输出返回数据
             *   this.dialogVisible=false ：关闭添加表单页面
             */
            request.post("/api/save", this.form).then(res => {
              // console.log("res-", res)
              if (res.code === 200) {//说明后端校验成功
                this.dialogVisible = false
                this.list();
                //在添加完成后显示的调用一下
              } else if (res.code === 400) {//表示后端校验失败了
                //取出校验失败的信息返回给serverValidErrors
                this.serverValidErrors.name = res.extend.errorMsg.name
                this.serverValidErrors.maker = res.extend.errorMsg.maker
                this.serverValidErrors.price = res.extend.errorMsg.price
                this.serverValidErrors.sales = res.extend.errorMsg.sales
                this.serverValidErrors.stock = res.extend.errorMsg.stock
              }
            })
          } else {
            this.$message({
              type: "error",
              message: "验证失败,放弃提交"
            })
          }
          return false;
        })
      }
      // 这里有一个注意事项
      // 下面这段代码放到这里，会导致页面操作完成后，需要刷新一下页面才可以显示最新数据，
      // 就好像感觉下面的list方法失效一样。为何？？？
      // =====>因为request本质是ajax请求----会进行异步处理。
      // 它调用后端代码查询DB之后，不会等其结果返回，就直接执行下面的代码，
      // 这会导致下面的代码会在返回结果之前，直接进行刷新。
      // 就是两条线处理，一条线进行后端查询，另一条线执行下面代码，不会进行等待，
      // 本地的代码自然快，所有数据就会先刷新，等后端返回结果后，下面的list方法早就执行完毕，
      // 自热而然就不会显示最新的数据，需要重新刷新一下页面
      // this.dialogVisible = false
      // this.list();
    },
    //编写list方法，返回家具信息
    //该方法需要自动触发
    list() {
      // request.get("/api/furns").then(res => {
      //   console.log("res-", res)
      //   //对返回的response进行了统一的拦截处理， let res = response.data
      //   //所以这里可以直接使用 res.extend.furnList
      //   this.tableData = res.extend.furnList
      // })
      request.get("api/furnsByConditionPage", {
        params: {//指定携带的参数
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          search: this.search
        }
      }).then(res => {//处理返回的分页信息
        this.tableData = res.extend.pageInfo.list
        this.total = res.extend.pageInfo.total
      })
    },
    handleEdit(row) {
      // console.log('row-',row)
      //将当前家具信息绑定到弹出的form对话框中
      //方式一: 可以通过row.id到后端db去进行查询对应的家具信息，返回后将其绑定到this.form上
      request.put("/api/findFurn/" + row.id).then(res => {
        // console.log('res.extend.furn',res.extend.furn)
        this.form = res.extend.furn
        this.dialogVisible = true
      })
      //方式二:把获取的row的数据通过处理,绑定到this.from进行显示
      // JSON.stringify(row) 的含义是将row对象转成json字符串
      // JSON.parse(JSON.stringify(row)) 的含义是将JSON字符串转成JSON对象
      // this.form = JSON.parse(JSON.stringify(row))
      // this.dialogVisible = true
    },
    handleDel(id) {
      // console.log('id--',id)
      request.delete("/api/delete/" + id).then(res => {
        if (res.code == 200) {//表示删除成功
          this.$message({
            type: "success",
            message: res.msg
          })
        } else {
          this.$message({
            type: "error",
            message: res.msg
          })
        }
        this.list();
      })
    },
    handlePageSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.list();
    },
    handleCurrentChange(pageNum) {//处理分页请求
      //当用户点击分页超链接时，会携带pageNum
      // console.log('pageNums--', pageNum)
      this.currentPage = pageNum;
      //发出分页请求
      this.list();
    }
  }
}
</script>
